import 'package:cached_network_image/cached_network_image.dart';
import 'package:casdon/app/config/theme/theme_extention.dart';
import 'package:casdon/build_gen/assets.gen.dart';
import 'package:casdon/common/widget/badge_icon.dart';
import 'package:casdon/modules/recipe/data/model/recipe_module_content_model.dart';
import 'package:casdon/modules/recipe/data/model/recipe_placeholder_data.dart';
import 'package:casdon/modules/recipe/ui/widgets/play_orverlay_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 单个菜谱卡片
class RecipeCardStyle1 extends StatelessWidget {
  final RecipeModuleContentModel item;

  const RecipeCardStyle1({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(right: 12.w),
      width: MediaQuery.of(context).size.width / 2.3,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          /// 图片部分
          SizedBox(
            width: double.infinity,
            height: 100.h,
            child: Stack(
              fit: StackFit.expand,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: CachedNetworkImage(
                    imageUrl: item.imgUrl,
                    cacheKey: item.recipeId,
                    fit: BoxFit.cover,
                    fadeInDuration: Duration.zero,
                    placeholder: (context, url) => const SizedBox(),
                    errorWidget: (context, url, error) {
                      return Image.network(
                        recipePlaceHolderImgUrl,
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) {
                          return Container(
                            color: Colors.grey[200],
                            child: const Icon(
                              Icons.image_outlined,
                              color: Colors.grey,
                            ),
                          );
                        },
                      );
                    },
                  ),
                ),
                if (item.isSmart)
                  Positioned(
                    right: 6,
                    top: 6,
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 6,
                        vertical: 2,
                      ),
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [Color(0xFF9470FF), Color(0xFF6652F9)],
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                        ),
                        borderRadius: BorderRadius.circular(4),
                      ),
                      child: const Text(
                        '智能',
                        style: TextStyle(color: Colors.white, fontSize: 10),
                      ),
                    ),
                  ),
                if (item.isVideo) const PlayOverlayButton(),
              ],
            ),
          ),

          SizedBox(height: 6.h),

          /// 标题文字
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SizedBox(width: 4.w),
              Expanded(
                child: Text(
                  item.title,
                  style: context.theme.textTheme.bodyMedium!.copyWith(
                    color: context.customColorThemeNonNull.textColor1,
                  ),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              Row(
                children: [
                  BadgeIcon(imagePath: Assets.images.icView.path, size: 18.r),
                  SizedBox(width: 2.w),
                  Text(
                    item.viewCount,
                    style: context.theme.textTheme.bodySmall!.copyWith(
                      color: context.customColorThemeNonNull.textColor2,
                    ),
                  ),
                  SizedBox(width: 4.w),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}
